<template>
	<view class="classList">
		
		<view class="loadingLayout" v-if="!classList.length && !noData"> 
			<uni-load-more status="loading"></uni-load-more>
		</view>
		
		<view class="content">
			
			<navigator :url="`/pages/perview/perview?id=${item._id}`" class="item" v-for="(item,index) in classList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
			
		</view>
		
		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import {onShareAppMessage,onShareTimeline,onUnload} from "@dcloudio/uni-app"
	import {onLoad,onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app'
	import {apiGetClassList,apiGetHistoryList} from '@/api/apis'
	import {gotoHome} from "@/utils/common.ts"
	//data参数
	const queryParams:any = {
		pageNum:1,
		pageSize:12
	}
	let pageName;
	const classList = ref([])
	const noData = ref(false)
	
	//接受传递过来的id
	onLoad((e)=>{
		const { id = null,name=null,type=null } = e;
		const numericId = id as number | null;
		const numericName = name as string | null
		if(type) queryParams.type = type //如果传递了评分或下载类型，则追加type属性
		if(id)  queryParams.classid = numericId//页面携带id，追加id属性
			
		
		pageName = name
		//设置导航栏
		uni.setNavigationBarTitle({
			title:name
		})
		//获取分类列表方法，晚于赋值之后执行
		getClassList()
	})
	
	//触底
	onReachBottom(()=>{
		if(noData.value) return;
		queryParams.pageNum++
		getClassList()
	})
	
	//下拉刷新
	onPullDownRefresh(()=>{
		//清空
		classList.value=[]
		//重新网络请求
		getClassList()
	})
	
	//获取分类列表网络数据
	const getClassList = async()=>{
		let res:any;
		if(queryParams.classid) res = await apiGetClassList(queryParams);
		if(queryParams.type) res = await apiGetHistoryList(queryParams);
		
		if(queryParams.pageSize > res.data.length) noData.value=true
		classList.value = [...classList.value , ...res.data]
		//放进缓存
		uni.setStorageSync("storyClassList",classList.value)
		//关闭下拉刷新
		uni.stopPullDownRefresh()
	}
	
	//分享
	onShareAppMessage((e)=>{
		return {
			title:"风夏的壁纸小屋-"+pageName,
			path:"/pages/classList/classList?id="+queryParams.classid+"&name="+pageName
		}
	})
	
	
	//分享朋友圈
	onShareTimeline(()=>{
		return {
			title:"风夏个人练手项目",
			query:"id="+queryParams.classid+"&name="+pageName
		}
		
	})
	
	//离开页面后清除缓存
	onUnload(()=>{
		uni.removeStorageSync("storyClassList")
	})
</script>

<style lang="scss" scoped>
	.classList{
		
		.content{
			display: grid;
			grid-template-columns: repeat(3,1fr);
			gap: 5rpx;
			padding: 5rpx;
			.item{
				height: 440rpx;
				image{
					width: 100%;
					height: 100%;
					display: block;
				}
				
			}
		}
	}      
</style>
